<template>
  <div class="tags">
    <el-tag 
      v-for="(tag,index) in tagsist" 
      :key="index"
      :closable="tag?.name != 'home'"
      :type="tag.path == route.path ? 'primary':'info'"
      effect="plain"
      @click="handleMenu(tag)"
      @close="handleClose(tag,index)"
    >{{ tag.label }}</el-tag>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute ,useRouter} from 'vue-router'
import { useAllDateStore } from '@/stores'
const tagsist = ref()
const route = useRoute()
const router = useRouter()
const store = useAllDateStore()
tagsist.value = store.state.tagslist
const handleMenu = (tag) =>{
  router.push(tag.path)
}
const handleClose = (tag,index) => {
  store.closeTag(tag)
  //router.push(tagsist[tagsist.length-1].path)
  // 判断关闭的页面是否是当前页面
  if(tag.path !== route.path) return 
  if(index == tagsist.value.length){
    store.selectMenu(tagsist.value[index-1])
    router.push(tagsist.value[index-1].name)
  }else{
    store.selectMenu(tagsist.value[index])
    router.push(tagsist.value[index].name)
  }

}
</script>

<style lang="less" scoped>
.tags{
  margin:20px 0 0 20px;
  cursor: pointer;
  .el-tag{
    margin-right:20px;
  }
}
</style>